import React, {Component} from 'react';
import withStyles from "@material-ui/core/styles/withStyles";
import GridContainer from "../components/Grid/GridContainer";
import GridItem from "../components/Grid/GridItem";
import Card from "../components/Card/Card";
import CardHeader from "../components/Card/CardHeader";
import CardBody from "../components/Card/CardBody";
import Table from "../components/Table/Table.jsx";
import MaterialTable, {MTableToolbar} from 'material-table';
const tableStyles = {
    cardCategoryWhite: {
        color: "rgba(255,255,255,.62)",
        margin: "0",
        fontSize: "14px",
        marginTop: "0",
        marginBottom: "0"
    },
    cardTitleWhite: {
        color: "#FFFFFF",
        marginTop: "0px",
        minHeight: "auto",
        fontWeight: "300",
        fontFamily: "'Roboto', 'Helvetica', 'Arial', sans-serif",
        marginBottom: "3px",
        textDecoration: "none"
    }
};
class TableList extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                { title: 'Name', field: 'name' },
                { title: 'Surname', field: 'surname' },
                { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
                {
                    title: 'Birth Place',
                    field: 'birthCity',
                    lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
                },
            ],
            data: [
                { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
                {
                    name: 'Zerya Betül',
                    surname: 'Baran',
                    birthYear: 2017,
                    birthCity: 34,
                },
                { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
                {
                    name: 'Zerya Betül',
                    surname: 'Baran',
                    birthYear: 2017,
                    birthCity: 34,
                },
                { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
                {
                    name: 'Zerya Betül',
                    surname: 'Baran',
                    birthYear: 2017,
                    birthCity: 34,
                },
            ],
        }
    }
    render() {
        const { classes } = this.props;
        return (
            <div>
                <GridContainer>
                    <GridItem xs={12} sm={12} md={12}>
                        <Card>
                            <CardHeader color="warning">
                                <h4 className={classes.cardTitleWhite}>Employees Stats</h4>
                                <p className={classes.cardCategoryWhite}>
                                    New employees on 15th September, 2016
                                </p>
                            </CardHeader>
                            <CardBody>
                                <Table
                                    tableHeaderColor="warning"
                                    tableHead={["ID", "Name", "Salary", "Country","Occupation"]}
                                    tableData={[
                                        ["1", "Dakota Rice", "$36,738", "Niger","Engineer"],
                                        ["2", "Minerva Hooper", "$23,789", "Curaçao","Doctor"],
                                        ["3", "Sage Rodriguez", "$56,142", "Netherlands","Teacher"],
                                        ["4", "Philip Chaney", "$38,735", "Korea, South","Sales Consultant"]
                                    ]}
                                />
                            </CardBody>
                        </Card>
                    </GridItem>
                    <GridItem xs={12} sm={12} md={12}>
                        <Card>
                            <CardHeader color="rose">
                                <h4 className={classes.cardTitleWhite}>Editable Example</h4>
                                <p className={classes.cardCategoryWhite}>
                                    Learn how to use  edit and delete
                                </p>
                            </CardHeader>
                            <CardBody>
                                <MaterialTable
                                    components={{
                                        Toolbar: props => (
                                            <div style={{ backgroundColor: '#e8eaf5' }}>
                                                <MTableToolbar {...props} />
                                            </div>
                                        )
                                    }}
                                    options={{
                                        exportButton: true,
                                        exportCsv: (columns, data) => {
                                            //override defalut methode joycewu
                                            alert('You should develop a code to export ' + data.length + ' rows');
                                        },
                                        filtering: true,
                                        grouping:true,
                                        search:true
                                    }}
                                    detailPanel={[
                                    {
                                        tooltip: 'Show Name',
                                        render: rowData => {
                                            return (
                                                <div
                                                    style={{
                                                        fontSize: 100,
                                                        textAlign: 'center',
                                                        color: 'white',
                                                        backgroundColor: '#43A047',
                                                    }}
                                                >
                                                    {rowData.name}
                                                </div>
                                            )
                                        },
                                    },
                                    {
                                        icon: 'account_circle',
                                        tooltip: 'Show Surname',
                                        render: rowData => {
                                            return (
                                                <div
                                                    style={{
                                                        fontSize: 100,
                                                        textAlign: 'center',
                                                        color: 'white',
                                                        backgroundColor: '#E53935',
                                                    }}
                                                >
                                                    {rowData.surname}
                                                </div>
                                            )
                                        },
                                    },
                                    {
                                        icon: 'favorite_border',
                                        openIcon: 'favorite',
                                        tooltip: 'Show Both',
                                        render: rowData => {
                                            return (
                                                <div
                                                    style={{
                                                        fontSize: 100,
                                                        textAlign: 'center',
                                                        color: 'white',
                                                        backgroundColor: '#FDD835',
                                                    }}
                                                >
                                                    {rowData.name} {rowData.surname}
                                                </div>
                                            )
                                        },
                                    },
                                ]}
                                    title=""
                                    columns={this.state.columns}
                                    data={this.state.data}
                                    editable={{
                                        onRowAdd: newData =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data.push(newData);
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                        onRowUpdate: (newData, oldData) =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data[data.indexOf(oldData)] = newData;
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                        onRowDelete: oldData =>
                                            new Promise(resolve => {
                                                setTimeout(() => {
                                                    resolve();
                                                    const data = this.state.data;
                                                    data.splice(data.indexOf(oldData), 1);
                                                    this.setState({
                                                        data:data
                                                    })
                                                }, 600);
                                            }),
                                    }}
                                />
                            </CardBody>
                        </Card>
                    </GridItem>
                </GridContainer>
            </div>
        )
    }
}
export default withStyles(tableStyles)(TableList);